<template>
  <CustomDialog v-model:visible="visible" :top="'15vh'">
    <div class="dialog-content">
      <div class="title">反结账账单</div>
      <div class="desc">
        确定要对账单【{{ orderNo }}】进行反结账吗？<br />反结账后此账单将会返回未结账的状态
      </div>
      <!-- 备注输入框 -->
      <div class="remark-section">
        <el-input
          v-model="remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注信息（必填）"
          maxlength="200"
          show-word-limit
          class="remark-input"
        />
      </div>
      <div class="btn-box">
        <el-button class="btn-cancel" @click="onCancel" :disabled="loading">取消</el-button>
        <el-button class="btn-confirm" type="primary" @click="onConfirm" :loading="loading"
          >确定</el-button
        >
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { deskOrderCancel } from '@/api/statistics'
import { ElMessage } from 'element-plus'

interface Props {
  modelValue: boolean
  orderId?: string | number
  orderNo?: string | number
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false
})
const emit = defineEmits(['update:modelValue', 'confirm-success'])

const loading = ref(false)
const remark = ref('')
const visible = computed({
  get: () => props.modelValue,
  set: v => emit('update:modelValue', v)
})

const orderNo = computed(() => props.orderNo ?? props.orderId ?? '')

function onCancel() {
  emit('update:modelValue', false)
  remark.value = ''
}

async function onConfirm() {
  if (!remark.value.trim()) {
    ElMessage.error('请输入备注信息')
    return
  }
  if (!props.orderId) return
  try {
    loading.value = true
    const res = await deskOrderCancel({ order_id: props.orderId, remark: remark.value.trim() })
    if (res.status === 200) {
      ElMessage.success('反结账成功')
      emit('update:modelValue', false)
      emit('confirm-success')
      remark.value = ''
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.dialog-content {
  padding: 20px 10px 10px;
  .title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #333;
    margin-bottom: 12px;
  }
  .desc {
    margin: 12px 0 24px;
    text-align: center;
    color: #666;
    font-size: 20px;
    line-height: 1.6;
  }
  .btn-box {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .btn-cancel {
    min-width: 140px;
    height: 52px;
    border-radius: 12px;
    font-size: 18px;
  }
  .btn-confirm {
    min-width: 140px;
    height: 52px;
    border-radius: 12px;
    font-size: 18px;
  }
  .remark-section {
    margin: 10px 0 20px;
  }
  .remark-input :deep(.el-textarea__inner) {
    border-radius: 8px;
    font-size: 14px;
    resize: none;
  }
}
</style>
